// import '../../../styles/tree-collapse-list.less'
import { CimAnimationFolding } from '../../../index'
import CimTreeCollapseList from './main.vue'

export default {
  name: 'TreeCollapseItem',
  components: {
    CimAnimationFolding,
    CimTreeCollapseList
  },
  props: {
    // data
    dataObject: {
      type: Object,
      default: () => ({})
    },
    configuration: {
      type: Object,
      default: () => ({})
    },
    activeWrapId: {
      type: [String, Number, Array],
      default: ''
    },
    activeItemId: {
      type: [String, Number],
      default: ''
    },
    getContent: {
      type: Function
    }
  },
  inject: ['animationType', 'showIcon', 'accordion', 'bodyBackgroundColor', 'cancelableSelf'],
  computed: {
    // item id
    id () {
      return this.dataObject[this.configuration.id]
    },
    // 折叠状态
    isSlideUp () {
      if (this.accordion) {
        return this.id !== this._activeWrapId
      } else {
        return !this._activeWrapId.includes(this.id)
      }
    },
    // 选中的wrap id
    _activeWrapId: {
      get () {
        return this.activeWrapId
      },
      set (id) {
        this.$emit('update:activeWrapId', id)
        // if (!this.configuration.subList) this.$emit('selectItem', id ? this.dataObject : null)
      }
    },
    // 选中的item id
    _activeItemId: {
      get () {
        return this.activeItemId
      },
      set (id) {
        this.$emit('update:activeItemId', id)
      }
    },
    // 选中的wrap active类
    headerActiveClass () {
      return this.accordion ? this.activeWrapId === this.id : this.activeWrapId.includes(this.id)
    }
  },
  watch: {
    activeWrapId () {
      if (this.activeWrapId === this.dataObject[this.configuration.id] && !this.configuration.subList) this.$emit('selectItem', this.activeWrapId ? this.dataObject : null)
    }
  },
  methods: {
    handleUpdateSlideUp (status) {
      if (status) {
        // 折叠时
        // 不能取消自己
        if (!this.cancelableSelf && !this.configuration.subList) {
          return false
        }

        if (this.accordion) {
          this._activeWrapId = ''
        } else {
          this._activeWrapId = this._activeWrapId.filter(id => id !== this.id)
        }
      } else {
        if (this.accordion) {
          this._activeWrapId = this.id
        } else {
          this._activeWrapId = this._activeWrapId.concat(this.id)
        }
      }
    },
    handleClickDelete (e, id) {
      e.stopPropagation()
      this.$emit('delete', id)
    }
  },
  render (h) {
    // data
    let { animationType, showIcon, configuration, dataObject, bodyBackgroundColor, cancelableSelf } = this
    // computed
    let { headerActiveClass, id, _activeItemId, isSlideUp } = this
    // methods
    const { getContent, handleUpdateSlideUp, handleClickDelete } = this
    let showDelete = false

    if (configuration.deletable) {
      showDelete = typeof configuration.deletable === 'boolean' ? configuration.deletable : (configuration.deletable[0] !== '!' ? dataObject[configuration.deletable] : !dataObject[configuration.deletable.slice(1)])
    }

    return (
      <cim-animation-folding
        animationType={animationType}
        showIcon={showIcon}
        class={[
          'cim-tree-collapse-list__item',
          configuration.subList ? 'cim-tree-collapse-list__item--hasChildren' : 'cim-tree-collapse-list__item--noChildren'
        ]}
        isSlideUp={isSlideUp}
        on={{
          'update:isSlideUp': handleUpdateSlideUp
        }}
      >
        <template slot="header">
          <div class={[
            'cim-tree-collapse-list__item__header',
            headerActiveClass ? 'cim-tree-collapse-list__item__header--active' : ''
          ]}>
            { configuration.titles && configuration.titles.map((title, index) => (
              <h3 key={index} class="cim-tree-collapse-list__item__header__title" style={configuration.titleStyle}>
                { getContent(`${id}title${index}`, dataObject, title.text, { tag: 'span' }) }
                { getContent(`${id}desc${index}`, dataObject, title.description, { tag: 'span', class: 'cim-tree-collapse-list__item__header__title__description' }) }
              </h3>
            )) }

            {
              configuration.contents ? (
                <ul class="cim-tree-collapse-list__item__header__contents">
                  { configuration.contents && configuration.contents.map((content, index) => {
                    if (content.range) {
                      if (!content.rangeValue) {
                        return dataObject[content.range].map(item => (
                          <li class="cim-tree-collapse-list__item__header__contents__content">{ item }</li>
                        ))
                      }
                    } else {
                      return content.hideJudge && content.hideJudge.every(key => !dataObject[key]) ? null : getContent(`${id}content${index}`, dataObject, content, {
                        tag: 'li',
                        class: 'cim-tree-collapse-list__item__header__contents__content',
                        style: configuration.contentStyle
                      })
                    }
                  }) }
                </ul>
              ) : null
            }

            {
              configuration.status ? (
                getContent(`${id}status`, dataObject, configuration.status, {
                  tag: 'span',
                  class: 'cim-tree-collapse-list__item__header__status'
                })
              ) : null
            }

            {
              showDelete ? (
                <span
                  class="cim-tree-collapse-list__item__header__delete"
                  onClick={e => handleClickDelete(e, dataObject)}
                >×</span>
              ) : null
            }
          </div>
        </template>

        <template slot="body">
          <div
            class={[
              'cim-tree-collapse-list__item__body'
            ]}
            style={{
              backgroundColor: bodyBackgroundColor
            }}
          >
            { configuration.subList ? (
              <CimTreeCollapseList
                dataList={dataObject[configuration.subList]}
                configuration={configuration.subConfiguration}
                showIcon={false}
                activeWrapId={_activeItemId}
                cancelableSelf={cancelableSelf}
                on={{
                  'update:activeWrapId': id => { this._activeItemId = id },
                  'delete': id => { this.$emit('delete', id) },
                  'selectItem': data => { this.$emit('selectItem', data) }
                }}
              ></CimTreeCollapseList>
            ) : null }
          </div>
        </template>
      </cim-animation-folding>
    )
  }
}
